<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #container {
            width: 1200px;
            height: 500px;
            margin: 100px auto;
            border: 1px solid red;
        }
        
        #container input {
            margin: 10px auto;
        }
        
        #container button {
            margin-left: 5px;
        }
        
        table {
            width: 600px;
            margin: 10px auto;
            text-align: center;
            color: #000;
            border-collapse: collapse;
            border: 1px solid red;
        }
        
        table,
        thead tr th,
        tbody tr td,
        tr td {
            border: 1px solid #000;
        }
    </style>
</head>

<body>
    <div id="container">
        按照价格查询：<input type="text" id="num1">-<input type="text" id="num2"><button id="search">搜索</button> 按照商品名称查询：<input type="text" id="name"><button id="query">查询</button><br/>


        <!-- <p>
            <input type="text" id="title"><button id="search">搜素</button>
        </p> -->

        <table>
            <tr>
                <td>id</td>
                <td>产品名称</td>
                <td>价格</td>
            </tr>
            <tbody id="list">

            </tbody>
        </table>

    </div>
    <script src="js/jquery-3.6.0.min.js"></script>
    <script>
        /*      需求：
                                1.可以按价格区间搜索 
                                2.可以按商品名称搜索  
                                3.查找到该商品后，循环需要停止 */

        // 获取元素
        // 获取价格范围的第一个文本框
        var num1 = my$("#num1")[0];
        // 获取价格范围的第二个文本框
        var num2 = my$("#num2")[0];
        var arrlist = [{
                'id': 1,
                'goodsname': '小米',
                'price': 3999
            }, {
                'id': 2,
                'goodsname': 'oppo',
                'price': 999
            }, {
                'id': 3,
                'goodsname': '荣耀',
                'price': 1299
            }, {
                'id': 4,
                'goodsname': '华为',
                'price': 1999
            }]
            // 将数组渲染到页面上
        function show(arr) {
            var str = ''
            arr.forEach(function(item, key) {
                str += `
			<tr>
				<td>${item.id}</td>
				<td>${item.goodsname}</td>
				<td>${item.price}</td>
			</tr
			`
            })
            $('#list').html(str)
        }
        show(arrlist)
            // 搜索
        $('#query').click(function() {
            var title = $('#name').val()
            var newarr = arrlist.filter(function(item, key) {
                return item.goodsname.includes(title)
            })
            if (newarr.length == 0) {
                show(arrlist);
            } else {
                show(newarr);
            }
        })
        $('#search').click(function() {
            // var nums1 = num1.value;
            // var nums2 = num1.value;

            var number1 = +num1.value;
            var number2 = +num2.value;
            var newarr = arrlist.filter(function(item, key) {
                if (item.price >= number1 && item.price <= number2) {
                    return item;
                }

            })
            if (newarr.length == 0) {
                show(arrlist)
            } else {
                show(newarr)
            }
        })


        function my$(select) {
            return document.querySelectorAll(select);

        }
    </script>
</body>

</html>